<!-- 登录 -->
<template>
	<div class="login-container">
		<!-- 表单 -->
		<div class="login-container-form">
			<div class="login-container-hello">欢迎登录</div>
			<div class="login-container-title">光明管家</div>
			<el-form :inline="false" :model="form" :rules="rules" ref="form" status-icon>
				<el-form-item class="mt-20" prop="username">
					<el-input maxlength="30" placeholder="请输入用户名" size="medium" v-model="form.username">
						<i class="iconfont icon-yonghuming" slot="prefix"></i>
					</el-input>
				</el-form-item>
				<el-form-item class="mt-20" prop="password">
					<el-input maxlength="30" placeholder="请输入密码" size="medium" type="password" v-model="form.password">
						<i class="iconfont icon-mima" slot="prefix"></i>
					</el-input>
				</el-form-item>
				<el-form-item class="mt-20" inline-message prop="code">
					<div class="flex-row">
						<el-input class="flex-1" maxlength="4" placeholder="验证码" size="medium" v-model="form.code">
							<i class="iconfont icon-yanzhengma" slot="prefix"></i>
						</el-input>
						<div class="img-code ml-10">
							<img :src="codeUrl" @click="getNewCode" alt="二维码" />
						</div>
					</div>
				</el-form-item>
				<el-button @click="onSubmit" class="w100" round size="medium" style="display:block;" type="primary">登录</el-button>
			</el-form>
		</div>
		<div class="login-container-tips">Powered by 综交院大数据中心</div>
	</div>
</template>
<script>
import setting from '@config'
import { getRandomStr } from '@utils/base/string'
import regExpList from '@utils/base/regExp'
import Api from './api'
export default {
	name: 'login',
	data() {
		function validator(name, regExpKey) {
			return function (rule, value, callback) {
				if (value === '') {
					callback(new Error('请输入' + name))
				} else if (!regExpList[regExpKey].test(value)) {
					callback(new Error('请输入正确的' + name))
				} else {
					callback()
				}
			}
		}
		return {
			// 标题
			title: setting.title,
			// 表单
			form: {
				username: '',
				password: '',
				code: ''
			},
			// 表单验证规则
			rules: {
				username: {
					trigger: 'blur',
					validator: validator('用户名', 'isUserName')
				},
				password: {
					trigger: 'blur'
					// validator: validator('密码', 'isPwd')
				},
				code: {
					trigger: 'blur',
					validator: validator('验证码', 'isYzCode')
				}
			},
			// 随机字符串使用次数
			useRandomAmount: 0,
			// 验证码随机字符串
			codeRandomStr: null
		}
	},
	computed: {
		// 验证码url地址
		codeUrl() {
			const url = Api.getCode()
			return url + this.codeRandomStr
		}
	},
	created() {
		this.getNewCode()
		this.addEnterEvent()
	},
	methods: {
		// 获取验证码随机字符串
		getNewCode() {
			// 验证码字符串不存在，或者使用次数超过10次，重新生成随机字符串
			// if (!this.codeRandomStr || this.useRandomAmount > 10) {
			this.form.sign = this.codeRandomStr = getRandomStr()
			// }
			// 次数加一

			this.useRandomAmount++
		},
		// 回车事件
		addEnterEvent() {
			window.addEventListener('keydown', e => {
				if (e.key === 'Enter') {
					this.onSubmit()
				}
			})
		},
		// 提交
		onSubmit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.$store
						.dispatch('user/login', this.form)
						.then(res => {
							// 跳转首页
							setTimeout(() => {
								const redirect = this.$route.query.redirect
								if (redirect && redirect !== '/login') {
									this.$router.push({ path: this.$route.query.redirect })
								} else {
									this.$router.push({ path: '/' })
								}
							}, 200)
						})
						.catch(() => {
							this.getNewCode()
						})
				} else {
					this.scrollIntoView()
					return false
				}
			})
		}
	},
	beforeDestroy() {
		window.removeEventListener('keydown', e => {
			if (e.key === 'Enter') {
				this.onSubmit()
			}
		})
	}
}
</script>
<style lang="scss" scoped>
.login-container {
	height: 100vh;
	overflow: hidden;
	background-image: url('./images/bg.jpg');
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	// 标题
	h2 {
		position: absolute;
		left: 5%;
		top: 7.5%;
		line-height: 52px;
		text-align: left;
		font-size: 34px;
		color: transparent;
		font-weight: normal;
		z-index: 2;
	}
	// 底部
	.footer {
		position: absolute;
		left: 0;
		bottom: 12.31%;
		width: 100%;
		height: 34px;
		line-height: 34px;
		text-align: center;
		color: #3d3d3d;
		font-size: 14px;
		span {
			color: #9faab0;
			padding-left: 8px;
		}
	}
	// 输入框样式修改

	// 表单
	&-form {
		width: calc(100% - 40px);
		padding: 8vh 4vh;
		background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
		background-size: 100% 100%;
		border-radius: 10px;
		// box-shadow: 0 2px 8px 0 rgba(7, 17, 27, 0.06);
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 360px;
	}
	// 欢迎标题
	&-hello {
		font-size: 32px;
		line-height: 150%;
		color: #fff;
	}
	&-title {
		margin-bottom: 30px;
		font-size: 20px;
		color: #fff;
	}
	&-tips {
		position: absolute;
		bottom: 15px;
		left: 0;
		right: 0;
		text-align: center;
		color: #fff;
	}
}
// .code-img {
// 	height: 34px;
// 	cursor: pointer;
// }
.img-code {
	width: 136px;
	height: 34px;
	cursor: pointer;
	background-color: #fff;
	border-radius: 5px;
	overflow: hidden;
	img {
		height: 100%;
		width: 100%;
	}
}
</style>
